#{$prefix}-split {
  position: relative;
  width: 100%;
  height: 100%;

  &_wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
  }

  &_fixed {
    position: relative;
    flex-shrink: 0;
  }

  &_trigger {
    position: relative;
    flex-shrink: 0;
    background-color: #f8f8f9;
  }

  &_auto {
    position: relative;
    flex-grow: 1;
  }

  //水平分割
  &.horizontal {
    #{$prefix}-split_wrapper {
      flex-direction: row;
    }

    #{$prefix}-split_trigger {
      width: 6px;
      cursor: col-resize;
    }

    #{$prefix}-split_trigger_bar {
      position: absolute;
      overflow: hidden;
      left: 1px;
      top: 50%;
      height: 32px;
      transform: translateY(-50%);

      i {
        width: 4px;
        height: 1px;
        background: rgba(23, 35, 61, 0.25);
        float: left;
        margin-top: 3px;
      }
    }
  }

  //垂直分割
  &.vertical {
    #{$prefix}-split_wrapper {
      flex-direction: column;
    }

    #{$prefix}-split_trigger {
      height: 6px;
      cursor: row-resize;
    }

    #{$prefix}-split_trigger_bar {
      position: absolute;
      overflow: hidden;
      top: 1px;
      left: 50%;
      height: 4px;
      transform: translateX(-50%);

      i {
        height: 4px;
        width: 1px;
        background: rgba(23, 35, 61, 0.25);
        margin-left: 3px;
        float: left;
      }
    }
  }

  &.no-select {
    user-select: none;
  }
}
